<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">客户沟通</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="min-height: 50px;">
        <el-col :span="23">
          <el-col style="width:320px;">
            <el-col style="width: 320px;border: 2px solid #ececec;">
            <el-calendar v-model="data">
                  <template slot="dateCell" slot-scope="{date, data}">
                    <div style="width: 100%;height: 100%;">
                      <p>{{ data.day.split('-').slice(2).join('-') }}</p>
                    </div>
                  </template>
                </el-calendar>
          </el-col>
          </el-col>
          <el-col class="listbox" style="margin-left:25px">
            <el-row>
              <div class="tabletitle" style="float: left;">
                <span style="float: left;">搜索 :</span>
                <el-col
                  class="interviewtrack"
                  style="margin-right:10px;margin-left: 8px;width: 180px;"
                >
                  <el-select
                      v-model="name"
                      placeholder="请选择客户简称"
                      @change="selectcustomer"
                    >
                      <el-option
                        v-for="item in customerNames"
                        :key="item.id"
                        :label="item.customer_name"
                        :value="item.customer_name"
                      ></el-option>
                    </el-select>
                </el-col>
              </div>
              <div style="float: right;">
                <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
                  <el-input
                    style="width: 136px;"
                    size="small"
                    placeholder="请输入内容"
                    v-model.trim="inputValue"
                    @keyup.enter.native="searchMsg"
                  >
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-search"
                      style="cursor: pointer;"
                      @click="searchMsg"
                    ></i>
                  </el-input>
                  <div style="margin-left: 5px;" v-if="jiaofu">
                    <el-button class="newcon" size="small" round @click="addshow">新增</el-button>
                    <el-button
                      class="edit"
                      @mousedown.native="editdown"
                      @mouseup.native="editup"
                      :class="{'active1' : newcolor1}"
                      size="small"
                      @click="editClick"
                      round
                    >修改</el-button>
                    <el-button
                      class="delete"
                      @mousedown.native="deletedown"
                      @mouseup.native="deleteup"
                      @click="deletedata"
                      :class="{'active2' : newcolor2}"
                      size="small"
                      round
                    >删除</el-button>
                  </div>
                </el-row>
              </div>
            </el-row>
            <el-row type="flex" justify="center" style="padding-top: 15px;">
              <el-col :span="23">
                <el-table
                  ref="singleTable"
                  highlight-current-row
                  :data="tableData"
                  @current-change="handleCurrentChange"
                >
                  <el-table-column label="客户简称" width="120">
                    <template slot-scope="scope">
                      <span style="cursor: pointer; color:#1198ff;" @click="viewdetail(scope.row)">
                        {{scope.row.customerName}}</span>
                    </template>
                  </el-table-column>

                  
                  <el-table-column prop="target" label="沟通对象"></el-table-column>
                  <el-table-column label="时间">
                    <template slot-scope="scope">
                      <span>{{scope.row.time | converTime("YYYY-MM-DD")}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="content" label="沟通内容"></el-table-column>
                  <el-table-column prop="result" label="沟通结果"></el-table-column>
                </el-table>
                <div class="pager">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="pagehandleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalcount"
                  ></el-pagination>
                  <el-dialog
                    title="删除客户沟通"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="deleteClose"
                    class="deletedialog"
                  >
                    <div style="text-align: center">
                      <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
                        <span style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该客户沟通吗？</span>
                      </i>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button class="sure" :disabled="deletedis" round @click="deletesend">确 定</el-button>
                      <el-button round @click="deleteClose" class="cancel">取 消</el-button>
                    </span>
                  </el-dialog>

                  <!--            未选择表格当前行的弹出框-->
                  <el-dialog
                    title="错误"
                    :visible.sync="editdialogVisible"
                    width="30%"
                    :before-close="handleClose"
                    class="deletedialog"
                  >
                    <div style="text-align: center">
                      <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
                        <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何客户</span>
                      </i>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button class="sure" round @click="handleOpen">确 定</el-button>
                      <el-button round @click="handleClose" class="cancel">取 消</el-button>
                    </span>
                  </el-dialog>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </div>

    <div v-if="type == 3">
      <customer-detail v-if="addShow"  :detail-code="detailcode" ref="customerDetail" ></customer-detail>
    </div>
    <div v-if="type == 4">
      <edit-Customer
        v-if="addShow"
        :currentData="currentrow"
        @getData="getData1"
        ref="editCustomer"
      ></edit-Customer>
    </div>
    <div v-if="type == 5">
      <add-Customer v-if="addShow" @getData="getData1" ref="addCustomer"></add-Customer>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import qs from "qs";
import tagsView from '../../store/modules/tagsView'
import AddCustomer from "./addCustomer.vue";
import EditCustomer from "./editCustomer.vue";
import CustomerDetail from "./customerDetail.vue";

export default {
  components: {
    AddCustomer,
    EditCustomer,
    CustomerDetail
  },
  data() {
    return {
       date: moment(new Date()).format("YYYY-MM-DD"),
      data: moment(new Date()).format("YYYY-MM-DD"),
      inputValue: "",
      days: "",
      name:'',
      jiaofu:false,
      secondshow: false,
      editdialogVisible: false,
      closedialogVisible: false,
      differcopierDialogVisible: false,
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      totalcount: 0,
      newcolor1: false,
      detailVisible: false,
      detailVisible1: false,
      newcolor2: false,
      type: null,
      secondtitle: "",
      addShow: false,
      currentRow: null,
      feedBackVisible: false,
      dialogFormVisible: false,
      samemailDialogVisible: false,
      dialogVisible: false,
      formLabelWidth: "120px",
      deletedis: false,
      id: [],
      customerNames: [],
    };
  },
  created() {
    this.success();
    this.selecttodaywork();
    axios
      .get(this.url + "/communicaterecord/getcustomernames") // 客户名称下拉列表请求
      .then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      });
      if(tagsView.state.identity == 7){
        this.jiaofu = true;
      }
  },
  methods: {
    //获取保存状态下的表格数据
    getData() {
      this.addShow = false;
      this.secondshow = false;
      this.currentRow = null;
      var form = {
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      };
      this.success();
    },
    getData1() {
      this.addShow = false;
      this.secondshow = false;
      this.currentRow = null;
      this.currentPage = 1;
      var form = {
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      };
      this.success();
    },
    addshow() {
      this.addShow = !this.addShow;
      this.secondtitle = "新增客户沟通";
      this.secondshow = true;
      this.type = 5;
      this.$nextTick(() => {
        if (this.$refs.uploadAdd) {
          this.$refs.uploadAdd.initdata();
          this.$refs.uploadAdd.clearData();
          this.$refs.uploadAdd.resetFields("form");
        }
      });
    },
    // 修改按钮点击
    editClick() {
      this.currentrow = null;
      if (this.currentRow == null) {
        document.documentElement.style.overflow = "hidden";
        //未选择表格行，展示的弹出框
        this.editdialogVisible = !this.editdialogVisible;
      } else {
        document.documentElement.style.overflow = "auto";
        this.addShow = !this.addShow;
        this.secondtitle = "修改客户沟通";
        this.secondshow = !this.secondshow;
        this.type = 4;
        this.currentrow = this.currentRow;
        //修改子组件的事件触发
        if (this.$refs.editinterview) {
          this.$refs.editinterview.clearData();
          this.$refs.editinterview.resetFields("form");
        }
      }
    },
    editdown() {
      this.newcolor1 = true;
    },
    editup() {
      this.newcolor1 = false;
    },
    //从后台获取候选人表格的数据
    success() {
      axios
        .post(this.url + "/communicaterecord/getcommunicate", {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          time: this.date
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            }
          }
        });
    },
    selectcustomer(){
      this.currentPage = 1; 
      axios
        .post(this.url + "/communicaterecord/getcommunicate", {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          time: this.date,
          customerName: this.name
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            }
          }
        });
    },
    test(date) {
        this.activeName = null;
        $(".list").find('.box1').height(34);
        var date = moment(date).format('YYYY-MM-DD');
        axios.post(this.url + '/workrecord/checktime', {
          time: date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.date = date;
            this.success();
            this.selecttodaywork();
            if (this.date < moment(new Date()).format('YYYY-MM-DD')) {
              this.inputdis = true;
              this.btndis = false;
              this.clock = false;
              this.taskinfo = "暂无数据!"
            } else {
              this.inputdis = false;
              this.btndis = true;
              this.taskinfo = "请输入今日工作..."
              setTimeout(() => {
                this.clock = true;
              }, 100)
            }
          }
          if (res.data.code == -300) {
            this.data = this.date;
            this.errordialogVisible = true;
            document.documentElement.style.overflow = 'hidden';
          }
        })
      },
      selecttodaywork() {
        axios.post(this.url + '/workrecord/selecttodaywork', {
          time: this.date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            // this.form.todaytask = res.data.data.content;
            // this.form.id = res.data.data.id;
          }
        })
      },
    //搜索
    searchMsg() {
      this.currentPage = 1;
      this.success();
    },
    
    //组件页面消失，回到当前页面
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.$refs.multipleTable.setCurrentRow(row);
      this.type = null;
      this.success();
    },

    handleOpen() {
      this.editdialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    handleClose() {
      this.editdialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    handleClose1() {
      this.closedialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //查看反馈内容
    viewdetail(val) {
      this.detailcode = val;
      this.addShow = !this.addShow;
      this.secondtitle = "查看沟通内容";
      this.secondshow = !this.secondshow;
      this.type = 3;
    },
    //查看反馈内容
    viewdetail1(val) {
      this.detailcode = val;
      this.addShow = !this.addShow;
      this.secondtitle = "查看反馈内容";
      this.secondshow = !this.secondshow;
      this.type = 1;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.success();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.success();
    },

    //删除弹出框
    deletedata(row) {
      if (this.currentRow == null) {
        document.documentElement.style.overflow = "hidden";
        this.editdialogVisible = !this.editdialogVisible;
      } else {
        document.documentElement.style.overflow = "hidden";
        this.dialogVisible = true;
        this.deletedis = false;
      }
    },
    //关闭删除弹出框
    deleteClose(row) {
      this.dialogVisible = false;
      this.$refs.multipleTable.setCurrentRow(row);
      this.currentRow = null;
      document.documentElement.style.overflow = "auto";
    },
    //发送删除请求
    deletesend() {
      this.dialogVisible = false;
      this.deletedis = true;

        axios
          .post(
            this.url + "/communicaterecord/delcommunicate",
            {
              id: this.currentRow.id
            }
          )
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.dialogVisible = false;
              this.deletedis = false;
              this.currentPage = 1;
              this.success();
              document.documentElement.style.overflow = "auto";
            }
          });
   
    },
    deletedown() {
      this.newcolor2 = true;
    },
    deleteup() {
      this.newcolor2 = false;
    },


  },

  watch: {
    data: function(val) {
      this.test(moment(val).format("YYYY-MM-DD"));
    },
    inputValue: function(val) {
      if (val == "") {
        this.currentPage = 1;
        this.success();
      }
    }
  }
};
</script>
<style scoped>
.download {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  margin-left: 5px;
  color: #fff;
  background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
}
.download:hover {
  color: #fff !important;
}

.download:focus {
  color: #fff !important;
}
.edit {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  padding: 7px 15px !important;
}
.newcon {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
}
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.active1 {
  background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
}
.text {
  color: #1099ff;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}

.tabletitle {
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
}

.back {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #6a76c7 0%, #8995e8 100%);
  padding: 7px 15px !important;
}

.back:hover {
  color: #fff !important;
}
.back:focus {
  color: #fff !important;
}
.colsure {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  padding: 7px 6px !important;
}

.colsure:hover {
  color: #fff !important;
}
.colsure:focus {
  color: #fff !important;
}
.textactive {
  color: #1099ff;
}
.send {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #feaa12 0%, #f28316 100%);
  padding: 7px 15px !important;
}
.delete {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
}

.delete:hover {
  color: #fff !important;
}

.delete:focus {
  color: #fff !important;
}
.active2 {
  background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
}
.send:hover {
  color: #fff !important;
}
.send:focus {
  color: #fff !important;
}

.resutable {
  background-color: #fff;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.resumeLink {
  cursor: pointer;
  color: #1198ff;
  text-decoration: none;
}

.line {
  height: 1px;
  background-color: #c8c8c8;
  margin-top: 3px;
  margin-bottom: 20px;
}

.darkline {
  height: 1px;
  background-color: #4288c3;
  margin-top: 10px;
  margin-bottom: 20px;
}

.lightLine {
  height: 1px;
  background-color: #cccccc;
  margin-top: 10px;
  margin-bottom: 10px;
}
@media screen and (min-width: 1475px) and (max-width: 1675px) {
  .listbox {
    width: 75%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1475px) {
  .listbox {
    width: 72.4%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1300px) {
  .listbox {
    width: 67%;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1675px) and (max-width: 1700px) {
  .dialogBox {
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .listbox {
    width: 77%;
    /* height: 100px; */
    margin: 0 auto;
  }
}

@media screen and (min-width: 1701px) and (max-width: 1920px) {
  .dialogBox {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .listbox {
    width: 78%;
    /* height: 100px; */
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1920px) {
  .listbox {
    width: 79.46%;
    margin-right: 20px;
  }
}
</style>
